<template>
  <div class="score-com">
    <div class="list-li" v-for="(item, idx) in scoreData" :key="item.busId">
      <!-- 标题 -->
      <div class="s_tit">
        <div class="s_tit_text">
          {{ item.assessName }}
          <span>{{ item.assessDesc }}</span>
        </div>
      </div>
      <!-- 等次管理 -->
      <template v-if="item.children && item.children.length">
        <ScoreComponent :scoreData="item.children" :disabled="disabled"></ScoreComponent>
      </template>
      <div class="grade" v-if="item.optionList && item.optionList.length">
        <div class="grade_con">
          <div class="list" v-for="(item1, idx1) in item.optionList" :key="item1.optionId">
            <div
              :class="['btn', { active: item.checkOptionId === item1.optionId, disabled: disabled }]"
              @click="changeOrder(item1, idx1, item, idx)">
              {{ item1.optionLabel }}
            </div>
          </div>
        </div>
        <div class="grade_score">
          <div class="reason_con" v-if="showRemark(item)">
            <span class="s_label">备注</span>
            <van-field
              v-model="item.remark"
              rows="2"
              autosize
              type="textarea"
              placeholder="选择“一般”或者“较差”时需要输入原因"
              :readonly="disabled"
              maxlength="30" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScoreComponent from './ScoreComponent'
export default {
  name: 'ScoreComponent',
  components: { ScoreComponent },
  props: {
    scoreData: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 等次变化
    changeOrder(item1, idx1, item, idx) {
      if (this.disabled) return

      if (item.checkOptionId !== item1.optionId) {
        item.checkOptionId = item1.optionId
        item.optionLabel = item1.optionLabel
        item.score = (Number(item.assessScore) * item1.optionScore) / 100
      }

      if (idx1 !== 3) {
        item.remark = ''
      }
    },
    showRemark(item) {
      const len = item.optionList.length
      const list = item.optionList
      const optionId1 = list[len - 1].optionId
      const optionId2 = list[len - 2].optionId
      if ([optionId1, optionId2].includes(item.checkOptionId)) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.score-com {
  .score-com {
    margin-left: 10px;
    margin-top: 10px;
  }
  .s_tit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    border-left: 3px solid #0f61d5;
    padding-left: 10px;
    .s_tit_text {
      span {
        font-weight: 400;
        font-size: 12px;
      }
    }
  }
  .grade {
    display: flex;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
    .grade_con {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      .list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .btn {
          width: 70px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 3px;
          border: 1px solid #ccc;
          cursor: pointer;
          margin-bottom: 5px;
          color: #333;

          &.active {
            background-color: #0f61d5;
            color: #fff;
            border-color: #0f61d5;
          }
          &.disabled {
            cursor: not-allowed;
          }
        }
      }
    }
    .grade_score {
      width: 100%;
      .reason_con {
        display: flex;
        align-items: center;
        .s_label {
          margin-right: 10px;
          width: 40px;
        }
        .reason_ipt {
          flex: 1;
          width: 100px;
        }
      }
      .reason_con {
        margin-top: 5px;
        .van-field {
          border: 1px solid #f2f2f2;
          padding: 0 3px;
        }
      }
    }
  }
}
</style>
